<template>
  <s-layout
    title="我的资产"
    navbar="inner"
    :bgStyle="template.style?.background"
    :navbarStyle="template.style?.navbar"
  >
    <view class="count-wrapper">
      <view class="count">19.80</view>
      <view class="tips">浮动(元)</view>
    </view>
    <view class="price-wrapper">
      <view class="price-box">
        <view class="left">
          <view class="tips">
            藏品持仓市值
          </view>
          <view class="count primary-color">￥563.34</view>
        </view>
        <view class="right">
          <my-right></my-right>
        </view>
      </view>
    </view>
    <view class="list">
      <my-tabs
        :list="tabMaps"
        @change="onChange"
        :scrollable="false"
        :current="currentTab"
      ></my-tabs>
      <view class="sub-title">藏品收益</view>
      <view class="list-item" v-for="(item,index) in 5" :key="index">
        <view class="item">
          <view class="label">品牌孵化收益</view>
          <view class="value primary-color">￥124234
            <my-right></my-right>
          </view>
        </view>
      </view>
    </view>
  </s-layout>
</template>

<script setup>
  import { computed, ref } from 'vue';
  import SLayout from '@/sheep/components/s-layout/s-layout.vue';
  import sheep from '@/sheep';

  const template = computed(() => sheep.$store('app').template?.home);
  //tab切换
  const currentTab = ref(0);
  const tabMaps = [
    {
      name: '藏品资产',
      value: 'packet',
    },
    {
      name: '新能源资产',
      value: 'transfer',
    }, {
      name: '传承官',
      value: 'withdraw',
    },
  ];

  function onChange(e) {
    getLogList();
  }
</script>


<style scoped lang="scss">
  .count-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 400rpx;
    justify-content: center;

    .count {
      font-weight: 600;
      font-size: 80rpx;
      color: #36F6AF;
    }

    .tips {
      margin-top: 30rpx;
      font-size: 24rpx;
      color: #CDCDCD;
    }
  }

  .sub-title {
    padding: 0 30rpx;
    border-left: 2px solid #7fd3ce;
    font-size: 32rpx;
    color: #7fd3ce;
    margin-top: 60rpx;
    margin-bottom: 60rpx;
  }

  .price-wrapper {
    padding: 0 30rpx;

    .price-box {
      color: #fff;
      padding: 40rpx;
      background-color: #1d1c1d;
      border-radius: 20rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 72rpx;

      .tips {
        font-size: 36rpx;
      }

      .count {
        margin-top: 30rpx;
        font-size: 48rpx;
      }
    }
  }

  .list {
    padding: 0 30rpx;

    .list-title {
      font-size: 36rpx;
      color: #fff;
      margin-bottom: 27rpx;
    }


    .list-item {
      border-radius: 20rpx;
      margin-bottom: 22rpx;
      padding: 30rpx 0;
      font-size: 24rpx;

      .item {
        padding-bottom: 20rpx;
        display: flex;
        justify-content: space-between;

        .label {
          color: #fff;
        }

        .value {
          color: #fff;
        }

        &:last-child {
          padding-bottom: 0;
        }
      }
    }
  }


</style>
